<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left" @tap="backOnePage()">
				<image class="back" src="../../static/images/common/back.png" mode=""></image>
			</view>
			<view class="top-bar-center title">
				详情
			</view>
			<view class="top-bar-right pice"></view>
		</view>
		<view class="main">
			<view class="column heads">
				<view class="row head">
					<view class="title">
						头像
					</view>
					<view class="user-head">
						<image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel"></image-cropper>
						<image :src="cropFilePath" @tap="upload" class="user-img"></image>
					</view>
					<view class="more">
						<image src="../../static/images/details/more.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="row" @tap="modify('签名',dataArray.sign,false)">
					<view class="title">
						签名
					</view>
					<view class="cont">
						{{dataArray.sign}}
					</view>
					<view class="more">
						<image src="../../static/images/details/more.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="row">
					<view class="title">
						注册
					</view>
					<view class="cont">
						{{this.timeChange(dataArray.time)}}
					</view>
				</view>
			</view>
			<view class="column">
				<view class="row" @tap="modify('昵称',dataArray.name,false)">
					<view class="title" >
						昵称
					</view>
					<view class="cont">
						{{dataArray.name}}
					</view>
					<view class="more">
						<image src="../../static/images/details/more.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="row">
					<view class="title">
						性别
					</view>
					<view class="cont">
						<picker @change="bindPickerChange" :index="index" :range="array">
							<view class="uni-input">{{array[index]}}</view>
						</picker>
					</view>
					<view class="more">
						<image src="../../static/images/details/more.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="row">
					<view class="title">
						生日
					</view>
					<view class="cont">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{date}}</view>
						</picker>
					</view>
					<view class="more">
						<image src="../../static/images/details/more.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="row">
					<view class="title">
						电话
					</view>
					<view class="cont">
						{{dataArray.tell}}
					</view>
					<view class="more">
						<image src="../../static/images/details/more.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="row"  @tap="modify('邮箱',dataArray.email,true)">
					<view class="title">
						邮箱
					</view>
					<view class="cont">
						{{dataArray.email}}
					</view>
					<view class="more">
						<image src="../../static/images/details/more.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="column">
				<view class="row">
					<view class="title">
						密码
					</view>
					<view class="cont">
						123456
					</view>
					<view class="more">
						<image src="../../static/images/details/more.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="btn2">
				退出登录
			</view>
		</view>
		<view class="modify" :style="{bottom:'-'+modify_height+'px'}" :animation="this.animationData">
			<view class="modify-head">
				<view class="close" @tap="modify()">
					取消
				</view>
				<view class="title">
					{{modify_title}}
				</view>
				<view class="define" @tap="modifySubmit()">
					确定
				</view>
			</view>
			<view class="modify-main">
				<input v-model="psw" class="modify-psw" v-if="ispsw" type="text" placeholder="请输入原密码!" placeholder-style="color:#aaa;font-weight:400;" />
				<textarea v-model="data" class="modify-content" placeholder="" />
			</view>
		</view>
	</view>
</template>

<script>
	import ImageCropper from "../../components/ling-imgcropper/ling-imgcropper.vue"
	import time from "../../commons/js/myfunction.js"
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				dataArray:{
					name:"小黄人",
					sign:"I WANT MY ONLY BANANA!",
					time: new Date(),
					sex:'男',
					birth:"1998-04-12",
					tell:"18274115298",
					email:"303162146@qq.com"
				}, //模拟数据
				array: ['男', '女', '未知'],
				index: 0,
				cropFilePath: "../../static/images/img/yellowman.jpg",
				date: currentDate,
				tempFilePath: "",
				data:'修改的内容',//具体的修改内容
				animationData:{},//动画对象
				ismodify:false,//是否弹出
				modify_height:'', //弹框高度
				psw:'', //原密码
				modify_title:'', //弹框标题
				ispsw:false,//是否需要密码
			};
		},
		onReady: function(){
			this.getElementStyle();
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		components: {
			ImageCropper
		},
		methods: {
			//返回上一个页面
			backOnePage: function() {
				uni.navigateBack({
					detail: 1,
				})
			},
			//修改性别触发事件
			bindPickerChange: function(e) {
				this.index = e.target.value;
			},
			//修改日期触发事件
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			//获取日期
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//头像裁剪
			upload() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album","camera"], //从相册选择
					success: (res) => {
						this.tempFilePath = res.tempFilePaths.shift();
					},
				});
			},
			confirm(e) {
				this.tempFilePath = "";
				this.cropFilePath = e.detail.tempFilePath;

				// #ifdef APP-PLUS||MP
				//除了H5端返回base64数据外，其他端都是返回临时地址，所以你要判断base64还是临时文件名，（用条件编译APP-PLUS||MP执行编译。）
				//按我这里是先上传裁剪得来的临时文件地址然后得到临时文件名，
				//待活你要判断是H5还是其他端传给后端类型参数让后端判断执行何种情况代码就OK了

				uni.uploadFile({
					url: "后端地址上传图片接口地址",
					filePath: this.cropFilePath,
					name: "file",
					fileType: "image",
					//formData:{},传递参数
					success: (uploadFileRes) => {
						var backstr = uploadFileRes.data;
						//自定义操作
					},

					fail(e) {
						console.log("this is errormes " + e.message);
					},
				});

				// #endif 
			},
			cancel() {
				console.log("canceled");
				this.tempFilePath = "";
			},
			//修改项弹框
			modify: function(type,data,psw){
				this.ispsw = psw;
				this.modify_title = type;
				this.data = data;
				this.ismodify = !this.ismodify;
				var animation = uni.createAnimation({
					duration:300,
					timingFunction:'ease',
				});
				if(this.ismodify){
					animation.bottom(0).step();
				}else{
					animation.bottom(-this.modify_height).step();
				}
				this.animationData = animation.export();
			},
			//弹框修改确定
			modifySubmit: function(){
				this.modify();
			},
			//获取页面高度
			getElementStyle: function(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.modify').boundingClientRect(data=>{
					this.modify_height = data.height;
				}).exec();
			},
			//时间处理
			timeChange: function(date){
				return time.detailTime(date);
			}
		},
	}
</script>

<style lang="scss">
	@import "../../commons/css/mycss.scss";

	.top-bar {
		background: rgba($color: #fff, $alpha: 0.96);
		border-bottom: 1px solid $uni-border-color;
	}

	.main {
		padding-top: 118rpx;
		display: flex;
		flex-direction: column;

		.column {
			display: flex;
			flex-direction: column;
			border-bottom: 1px solid $uni-border-color;

			.row {
				padding-top: 12rpx;
				display: flex;
				flex-direction: row;

				.title {
					flex: none;
					padding: 0 $uni-spacing-col-base;
					font-size: $uni-font-size-lg;
					font-weight: 400;
					color: $uni-text-color;
					line-height: 112rpx;
				}

				.user-img {
					width: $uni-img-size-lg;
					height: $uni-img-size-lg;
					border-radius: $uni-border-radius-base;
				}

				.cont {
					flex: auto;
					font-size: $uni-font-size-lg;
					font-weight: 400;
					color: $uni-text-color-grey;
					line-height: 112rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.more {
					flex: none;
					width: 92rpx;
					height: 112rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}

			.head {
				display: flex;
				align-items: center;
				height: 148rpx;
			}

			.user-head {
				flex: auto;
				align-items: center;
			}
		}

		.btn2 {
			text-align: center;
			font-size: $uni-font-size-lg;
			color: $uni-color-warning;
			line-height: 88rpx;
			margin: 160rpx auto;
		}
	}
	.modify{
		position: fixed;
		z-index: 9999;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: #fff;
		.modify-head{
			padding-top: var(--status-bar-height);
			width: 100%;
			height: 88rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1px solid $uni-border-color;
			.close{
				padding-left: 32rpx;
				font-size: $uni-font-size-lg;
				color: $uni-text-color;
				line-height: 44rpx;
			}
			.title{
				flex: auto;
				text-align: center;
				font-size: 40rpx;
				color: $uni-text-color;
				line-height: 88rpx;
			}
			.define{
				padding-right: 32rpx;
				font-size: $uni-font-size-lg;
				color: $uni-color-success;
				line-height: 44rpx;
			}
		}
		.modify-main{
			display: flex;
			padding: 32rpx;
			flex-direction: column;
			.modify-psw{
				padding: 0rpx 20rpx;
				margin-bottom: 32rpx;
				flex: auto;
				background-color: rgba(243,244,246,1);
				border-radius: $uni-border-radius-base;
				font-size: $uni-font-size-lg;
				color: $uni-text-color;
				height: 88rpx;
			}
			.modify-content{
				padding: 16rpx 20rpx;
				flex: auto;
				box-sizing: border-box;
				width: 100%;
				height: 386rpx;
				background-color: rgba(243,244,246,1);
				border-radius: $uni-border-radius-base;
				font-size: $uni-font-size-lg;
				color: $uni-text-color;
				line-height: 44rpx;
			}
		}
	}
</style>
